<template>
    <div>
        <div class="top-img">
            <img src="../../assets/img/头部.png" alt="">
            <div class="top">
                <span>我的全部购物车</span>
            </div>
            <div class="sp-main">
                <span class="sp-title">沃尔玛</span>
                <div class="sp-item">
                    <div><img src="../../assets/img/番茄.png" alt=""></div>
                    <div class="sp-right">
                        <span class="sp-text1">番茄250g/份</span>
                        <div class="sp-bottom">
                            <span class="sp-text2">￥33.6×3</span>
                            <span>￥99</span>
                        </div>    
                    </div>
                </div>
                <div class="sp-item">
                    <div><img src="../../assets/img/樱桃.png" alt=""></div>
                    <div class="sp-right">
                        <span class="sp-text1">提子250g/份</span>
                        <div class="sp-bottom">
                            <span class="sp-text2">￥33.6×3</span>
                            <span>￥99</span>
                        </div>    
                    </div>
                </div>
            </div>
            <div class="sp-main">
                <span class="sp-title">京东7FRESH七鲜</span>
                <div class="sp-item">
                    <div><img src="../../assets/img/橙子.png" alt=""></div>
                    <div class="sp-right">
                        <span class="sp-text1">番茄250g/份</span>
                        <div class="sp-bottom">
                            <span class="sp-text2">￥33.6×3</span>
                            <span>￥99</span>
                        </div>    
                    </div>
                </div>
                <div class="sp-item">
                    <div><img src="../../assets/img/提子.png" alt=""></div>
                    <div class="sp-right">
                        <span class="sp-text1">提子250g/份</span>
                        <div class="sp-bottom">
                            <span class="sp-text2">￥33.6×3</span>
                            <span>￥99</span>
                        </div>    
                    </div>
                </div>
            </div>
            <div class="sp-main">
                <span class="sp-title">百果园</span>
                <div class="sp-item">
                    <div><img src="../../assets/img/橙子.png" alt=""></div>
                    <div class="sp-right">
                        <span class="sp-text1">番茄250g/份</span>
                        <div class="sp-bottom">
                            <span class="sp-text2">￥33.6×3</span>
                            <span>￥99</span>
                        </div>    
                    </div>
                </div>
            </div>
        </div>
        <div class="item" >
            <router-link :to="'/home'"><div class="main"><img src="../../../public/img/sy.png">首页</div></router-link>
            <router-link :to="'/shoppingcart'"><div class="main"><img src="../../../public/img/gwc.png">购物车</div></router-link>
            <router-link :to="'/order'"><div class="main"><img src="../../../public/img/dd.png">订单</div></router-link>
            <router-link :to="'/mine'"><div class="main"><img src="../../../public/img/wd.png">我的</div></router-link>
      </div>
    </div>
    </template>
    <style>
    .top-img img{
        width: 100vw;
    }
    .sp-main{
        margin-top: 20px;
    }
    .sp-top span{
        font-size: 18px;
        display: flex;
        justify-content: center;
    }
    .sp-title{
        font-weight: 800;
        font-size: 17px;
        margin-left: 40px;
    }
    .sp-item img{
        width: 60px;
    }
    .sp-item{
        display: flex;
        margin-left: 40px;
        margin-top: 10px;
    }
    .sp-right{
        display: flex;
        flex-direction: column;
    }
    .sp-right .sp-bottom{
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        width: 50vw;
    }
    .sp-text2{
        color: red;
    }
    </style>